<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Canvas 合成</title>
		<style>
			body {
				background: #666;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			canvas {
				background: #fff;
			}

			h1 {
				color: #fff;
				font-size: 24px;
			}
		</style>
	</head>

	<body>
		<h1>合成</h1>
		<canvas id="drawing" width="500" height="500"></canvas>
		<script>
			/** @type {HTMLCanvasElement} */
			var drawing = document.getElementById('drawing');
			if (drawing.getContext) {
				const ctx = drawing.getContext('2d');

				// ----------------------------------------
				// 设置透明度
				// ctx.globalAlpha = 1

				// // 绘制图形
				// ctx.fillStyle = 'red'
				// ctx.fillRect(
				//   100, 100,
				//   300, 300
				// )
				// ----------------------------------------

				// ------------------------------
				// 合并方式 整理 canvas 知识体系
				ctx.fillStyle = '#ff0000';
				ctx.fillRect(50, 50, 200, 200);

				// 后绘制的覆盖先绘制的
				// ctx.globalCompositeOperation = 'source-over' // 后绘制的覆盖先绘制的
				// ctx.globalCompositeOperation = 'source-in'   // 仅绘制交叉部分
				// ctx.globalCompositeOperation = 'source-out'; // 后绘制的图形 - 先绘制的图形: 剩下后绘制的图形
				// ctx.globalCompositeOperation = 'source-atop' // 先绘制的图形 + 重叠部分 - 后绘制的不重叠部分

				// 先绘制的覆盖后绘制的
				// ctx.globalCompositeOperation = 'destination-over'    // 先绘制的覆盖后绘制的
				// ctx.globalCompositeOperation = 'destination-in'      // 仅绘制交叉部分
				// ctx.globalCompositeOperation = 'destination-out'     // 重叠部分被擦除
				ctx.globalCompositeOperation = 'destination-atop'    // 后绘制的图形在先绘制图形的下方, 在两者不重叠的地方, 先绘制的图形会变透明

				// 其他
				// ctx.globalCompositeOperation = 'lighter'   //重叠部分, 颜色相加
				// ctx.globalCompositeOperation = 'copy'      // 后绘制的图形完全取代先绘制的图形
				// ctx.globalCompositeOperation = 'xor'       // 组合图形, 重叠部分变成白色

				ctx.fillStyle = 'rgba(0,0,255,1)';
				ctx.fillRect(150, 150, 200, 200);

				// ------------------------------
			}
		</script>
	</body>
</html>
